<!--
  * @Description: 招聘-企业注册
  * @Author: rcc
  * @Date: 2024-08-13 17:42:35
  * @FilePath: /rc-recruitment/pages/user/firm/firm.vue
-->

<template>
  <view class="p-h24">
    <RcNavigation title="企业注册" iconColor="white" color="#fff" bgColor="#1269FF" />

    <view class="step-view m-t40">
      <view class="line" />

      <view class="dot-view flex-sb p-h40">
        <view class="flex-d-c" :class="{ 'dot-el': step === 1 }">
          <view class="dot" />
          <text class="m-t20 text-700-428">基本信息</text>
        </view>
        <view class="flex-d-c" :class="{ 'dot-el': step === 2 }">
          <view class="dot" />
          <text class="m-t20 text-700-428">企业认证</text>
        </view>
        <view class="flex-d-c" :class="{ 'dot-el': step === 3 }">
          <view class="dot" />
          <text class="m-t20 text-700-428">手机验证</text>
        </view>
      </view>
    </view>

    <template v-if="step === 1">
      <view class="card flex">
        <text class="flex-1 text-700-130">创建基本信息</text>
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">姓名</text>
        <input v-model="formData1.nickname" class="text-r" type="text" placeholder="请填写姓名" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">企业名称</text>
        <input v-model="formData1.title" class="text-r" type="text" placeholder="请填写公司名称" />
      </view>
      <view class="card flex" @click="openBizNaturePicker(formData1.nature_id)">
        <text class="flex-1 text-700-130">企业性质</text>
        <text v-if="formData1.nature_id" class="text-400-128">{{
          getNatureName(formData1.nature_id)
        }}</text>
        <text v-else class="text-400-428">请选择企业性质</text>
        <image class="square-30" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex" @click="openScaleRangePicker(formData1.guimo)">
        <text class="flex-1 text-700-130">企业规模</text>
        <text v-if="formData1.guimo" class="text-400-128">{{
          getScaleRangeName(formData1.guimo)
        }}</text>
        <text v-else class="text-400-428">请选择企业规模</text>
        <image class="square-30" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">企业地址</text>
        <input v-model="formData1.address" class="text-r" type="text" placeholder="请填写企业地址" />
      </view>

      <view class="card flex">
        <text class="flex-1 text-700-130">我的职务</text>
        <input v-model="formData1.duties" class="text-r" type="text" placeholder="请填写职务" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">我的邮箱</text>
        <input v-model="formData1.email" class="text-r" type="text" placeholder="请填写接收简历邮箱" />
      </view>
    </template>

    <template v-if="step === 2">
      <!--  <view class="flex-sb">
        <view class="flex-d-c" @click="clickUpload(1)">
          <image v-if="formData2.sfz_z === ''" class="id-img" src="@/static/images/mine/front.png" />
          <image v-else class="id-img" :src="formData2.sfz_z" mode="aspectFill" />
          <text class="m-t30 text-400-424">手持身份证头像面</text>
        </view>
        <view class="flex-d-c" @click="clickUpload(2)">
          <image v-if="formData2.sfz_f === ''" class="id-img" src="@/static/images/mine/reverse.png" />
          <image v-else class="id-img" :src="formData2.sfz_f" mode="aspectFill" />
          <text class="m-t30 text-400-424">手持身份证国徽面</text>
        </view>
      </view>

			<view class="card flex m-t30">
				<text class="w-150 text-700-130">真实姓名</text>
				<input
					v-model="formData2.true_name"
					class="flex-1"
					type="text"
					placeholder="请输入真实姓名"
				/>
			</view>
			<view class="card flex">
				<text class="w-150 text-700-130">身份证号</text>
				<input
					v-model="formData2.sfz_num"
					class="flex-1"
					type="text"
					placeholder="请输入身份证号码"
				/>
			</view>
-->
      <view class="m-t40">
        <text class="text-700-130">上传企业营业执照</text>
        <view class="license flex-d-c m-t24" @click="clickUpload(3)">
          <template v-if="formData2.license === ''">
            <image class="square-24" src="@/static/images/user/add.png" />
            <text class="m-t20 text-400-424">点击上传</text>
          </template>
          <image v-else class="w h" :src="formData2.license" mode="aspectFill" />
        </view>
      </view>

      <view class="m-t40">
        <text class="text-700-130">企业简介</text>
        <textarea v-model="formData2.intro" class="synopsis m-t24" placeholder="请输入"></textarea>
      </view>

      <view class="m-t40">
        <text class="text-700-130">上传企业照片</text>
        <view class="photo flex-d-c m-t24" @click="clickUpload(4)">
          <template v-if="formData2.images === ''">
            <image class="square-24" src="@/static/images/user/add.png" />
            <text class="m-t20 text-400-424">点击上传</text>
          </template>
          <image v-else class="w h" :src="formData2.images" mode="aspectFill" />
        </view>
      </view>
      <!-- 新增的企业证明上传区域 -->
      <view class="m-t40">
        <view class="flex-sb">
          <text class="text-700-130">企业证明文件上传</text>
          <text class="text-400-428" @click="showProofTemplate">查看在职证明模板</text>
        </view>

        <!-- 单选按钮组 -->
        <view class="m-t24">
          <up-radio-group v-model="selectedProofType" @change="proofTypeChange">
            <up-radio v-for="item in proofTypes" :key="item.value" :label='item.label' :name="item.value"
              class="m-r20 m-b16">
              {{ item.label }}
            </up-radio>
          </up-radio-group>
        </view>

        <!-- 根据选择的证明类型显示对应的上传区域 -->
        <template v-if="selectedProofType === 1">
          <view class="proof-upload m-t24">
            <text class="text-700-130">在职证明</text>
            <text class="text-400-428 m-t8">支持PDF、JPEG、PNG格式，大小不超过5MB</text>
            <view class="upload-area m-t16" @click="clickUpload(5)">
              <template v-if="!formData2.zaizhi_url">
                <image class="square-24" src="@/static/images/user/add.png" />
                <text class="m-t8 text-400-424">点击上传在职证明</text>
              </template>
              <image v-else class="uploaded-image" :src="formData2.zaizhi_url" mode="aspectFill" />
            </view>
          </view>
        </template>

        <template v-else-if="selectedProofType === 2">
          <view class="proof-upload m-t24">
            <text class="text-700-130">名片证明</text>
            <text class="text-400-428 m-t8">支持JPEG、PNG格式，大小不超过5MB</text>
            <view class="upload-area m-t16" @click="clickUpload(6)">
              <template v-if="!formData2.mingpian_url">
                <image class="square-24" src="@/static/images/user/add.png" />
                <text class="m-t8 text-400-424">点击上传名片</text>
              </template>
              <image v-else class="uploaded-image" :src="formData2.mingpian_url" mode="aspectFill" />
            </view>
          </view>
        </template>

        <template v-else-if="selectedProofType === 3">
          <view class="proof-upload m-t24">
            <text class="text-700-130">盖章在职证明</text>
            <text class="text-400-428 m-t8">支持PDF、JPEG、PNG格式，大小不超过5MB</text>
            <view class="upload-area m-t16" @click="clickUpload(7)">
              <template v-if="!formData2.gaizhang_url">
                <image class="square-24" src="@/static/images/user/add.png" />
                <text class="m-t8 text-400-424">点击上传盖章证明</text>
              </template>
              <image v-else class="uploaded-image" :src="formData2.gaizhang_url" mode="aspectFill" />
            </view>
          </view>
        </template>

        <template v-else-if="selectedProofType === 4">
          <view class="proof-upload m-t24">
            <text class="text-700-130">企业邮箱证明</text>
            <text class="text-400-428 m-t8">支持PDF、JPEG、PNG格式，大小不超过5MB</text>
            <view class="upload-area m-t16" @click="clickUpload(8)">
              <template v-if="!formData2.email_url">
                <image class="square-24" src="@/static/images/user/add.png" />
                <text class="m-t8 text-400-424">点击上传邮箱证明</text>
              </template>
              <image v-else class="uploaded-image" :src="formData2.email_url" mode="aspectFill" />
            </view>
          </view>
        </template>

        <template v-else-if="selectedProofType === 5">
          <view class="proof-upload m-t24">
            <text class="text-700-130">企业微信名片</text>
            <text class="text-400-428 m-t8">支持JPEG、PNG格式，大小不超过5MB</text>
            <view class="upload-area m-t16" @click="clickUpload(9)">
              <template v-if="!formData2.qwcard_url">
                <image class="square-24" src="@/static/images/user/add.png" />
                <text class="m-t8 text-400-424">点击上传企业微信名片</text>
              </template>
              <image v-else class="uploaded-image" :src="formData2.qwcard_url" mode="aspectFill" />
            </view>
          </view>
        </template>
      </view>
    </template>

    <template v-if="step === 3">
      <view class="card flex m-t10">
        <image class="square-40" src="@/static/images/public/phone.png" />
        <view class="line" />
        <text class="m-r20 text-700-130">+86</text>
        <input v-model="formData3.mobile" class="flex-1" type="text" placeholder="请输入手机号" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/safety.png" />
        <view class="line" />
        <input v-model="formData3.captcha" class="flex-1" type="text" placeholder="图形验证码" />
        <image class="captcha" :src="captchaUrl" mode="aspectFill" @click="refreshCaptcha" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/lock.png" />
        <view class="line" />
        <input v-model="formData3.password" class="flex-1" type="text" password placeholder="请输入密码" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/lock.png" />
        <view class="line" />
        <input v-model="formData3.passwords" class="flex-1" type="text" password placeholder="请再次输入密码" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/mail.png" />
        <view class="line" />
        <input v-model="formData3.code" class="flex-1" type="text" placeholder="短信验证码" />
        <view class="send text-700-526" @click="sendCode(formData3.mobile, 2)">{{ codeText }}</view>
      </view>
    </template>

    <view class="flex-c p-b40">
      <RcButton :width="340" :text="step === 3 ? '注册' : '下一步'" @click="nextStep" />
    </view>

    <up-picker ref="bizNaturePickerRef" title="企业性质" keyName="name" :show="showBizNaturePicker"
      :columns="[bizNatureColumns]" @confirm="onBizNaturePickerConfirm" @cancel="closeBizNaturePicker" />

    <up-picker ref="scaleRangePickerRef" title="企业规模" keyName="name" :show="showScaleRangePicker"
      :columns="[scaleRangeColumns]" @confirm="onScaleRangePickerConfirm" @cancel="closeScaleRangePicker" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import type { UserData } from "@/types/api.d.ts";

import useCode from "@/hooks/use-code";
import useUpload from "@/hooks/use-upload";
import useCaptcha from "@/hooks/use-captcha";

import { useBizNature, useScaleRange } from "./useBizNature";

import RcButton from "@/components/button.vue";
import RcNavigation from "@/components/navigation.vue";

const { chooseImage, uploadImage } = useUpload();
const { captchaUrl, refreshCaptcha } = useCaptcha();
const { codeText, sendCode, clearCodeTimer } = useCode();
const {
  pickerRef: bizNaturePickerRef,
  columns: bizNatureColumns,
  show: showBizNaturePicker,
  open: openBizNaturePicker,
  close: closeBizNaturePicker,
  getSelectedName: getNatureName,
} = useBizNature();
const {
  pickerRef: scaleRangePickerRef,
  columns: scaleRangeColumns,
  show: showScaleRangePicker,
  open: openScaleRangePicker,
  close: closeScaleRangePicker,
  getSelectedName: getScaleRangeName,
} = useScaleRange();
const step: any = ref(1);
// 新增的证明类型选项
const proofTypes = ref([
  { label: '在职证明', value: 1 },
  { label: '名片证明', value: 2 },
  { label: '盖章在职证明', value: 3 },
  { label: '企业邮箱证明', value: 4 },
  { label: '企业微信名片', value: 5 }
]);
// 当前选中的证明类型
const selectedProofType = ref(1);

// 证明类型变更处理
const proofTypeChange = (value: number) => {
  selectedProofType.value = value;
};
const isDisabled = ref(false);
const formData1: any = reactive({
  address: "",
  guimo: "",
  nickname: "",
  title: "",
  nature_id: 0,
  duties: "",
  email: "",
});

const formData2: any = reactive({
  sfz_z: "",
  sfz_f: "",
  true_name: "",
  sfz_num: "",
  license: "",
  intro: "",
  images: "",
  // 新增的证明文件字段
  zaizhi_url: "",
  mingpian_url: "",
  gaizhang_url: "",
  email_url: "",
  qwcard_url: "",
});

const formData3: any = reactive({
  mobile: "",
  captcha: "",
  password: "",
  passwords: "",
  code: "",
});

onLoad(() => {
  refreshCaptcha();
});

onUnload(() => {
  clearCodeTimer();
});

const onBizNaturePickerConfirm = (e: any) => {
  const selected = e.value[0];

  formData1.nature_id = selected.id;

  closeBizNaturePicker();
};
const onScaleRangePickerConfirm = (e: any) => {
  const selected = e.value[0];

  formData1.guimo = selected.id;

  closeScaleRangePicker();
};

// 修改上传方法
const clickUpload = async (type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9) => {
  // 设置不同上传类型的大小限制
  const sizeLimit = 5; // 5MB

  const { filePath, success, size } = await chooseImage();

  if (!success) return;

  // 检查文件大小
  if (size > sizeLimit * 1024 * 1024) {
    uni.$u.toast(`文件大小不能超过${sizeLimit}MB`);
    return;
  }

  uni.showLoading({ title: "上传中...", mask: true });

  const uploadResult = await uploadImage(filePath);

  uni.hideLoading();

  if (!uploadResult.success) return;

  switch (type) {
    case 1:
      formData2.sfz_z = uploadResult.url;
      break;
    case 2:
      formData2.sfz_f = uploadResult.url;
      break;
    case 3:
      formData2.license = uploadResult.url;
      break;
    case 4:
      formData2.images = uploadResult.url;
      break;
    case 5:
      formData2.zaizhi_url = uploadResult.url;
      break;
    case 6:
      formData2.mingpian_url = uploadResult.url;
      break;
    case 7:
      formData2.gaizhang_url = uploadResult.url;
      break;
    case 8:
      formData2.email_url = uploadResult.url;
      break;
    case 9:
      formData2.qwcard_url = uploadResult.url;
      break;
    default:
      break;
  }
};

// 显示在职证明模板
const showProofTemplate = () => {
  uni.showModal({
    title: "在职证明模板",
    content:
      "此处显示在职证明的标准模板内容...\n\n应包括：\n1. 公司名称\n2. 员工姓名\n3. 在职时间\n4. 职位信息\n5. 公司盖章",
    confirmText: "我知道了",
    showCancel: false,
  });
};

const nextStep = () => {
  if (step.value === 1 && formVerify1()) return;
  if (step.value === 2 && formVerify2()) return;
  if (step.value === 3 && formVerify3()) return;

  if (step.value === 3) {
    submit();
  } else {
    step.value++;
  }
};

/**
 * 基本信息验证
 *
 * @returns {boolean} 验证结果.
 */
const formVerify1 = (): boolean => {
  if (formData1.nickname === "") {
    uni.$u.toast("请输入姓名");
    return true;
  }

  if (formData1.title === "") {
    uni.$u.toast("请输入公司名称");
    return true;
  }

  if (formData1.duties === "") {
    uni.$u.toast("请输入职务");
    return true;
  }

  if (formData1.email === "") {
    uni.$u.toast("请输入邮箱");
    return true;
  }

  return false;
};

/**
 * 企业信息认证
 *
 * @returns {boolean} 验证结果.
 */
const formVerify2 = (): boolean => {
  // if (formData2.sfz_z === "") {
  // 	uni.$u.toast("请上传手持身份证头像面");
  // 	return true;
  // }

  // if (formData2.sfz_f === "") {
  // 	uni.$u.toast("请上传手持身份证国徽面");
  // 	return true;
  // }

  // if (formData2.true_name === "") {
  // 	uni.$u.toast("请输入真实姓名");
  // 	return true;
  // }

  // if (formData2.sfz_num === "") {
  // 	uni.$u.toast("请输入身份证号码");
  // 	return true;
  // }

  if (formData2.license === "") {
    uni.$u.toast("请上传企业营业执照");
    return true;
  }

  if (formData2.intro === "") {
    uni.$u.toast("请输入企业简介");
    return true;
  }

  if (formData2.images === "") {
    uni.$u.toast("请上传企业照片");
    return true;
  }

  // 新增验证
  // 根据选中的证明类型验证对应的字段
  switch (selectedProofType.value) {
    case 1:
      if (formData2.zaizhi_url === "") {
        uni.$u.toast("请上传在职证明");
        return true;
      }
      break;
    case 2:
      if (formData2.mingpian_url === "") {
        uni.$u.toast("请上传名片证明");
        return true;
      }
      break;
    case 3:
      if (formData2.gaizhang_url === "") {
        uni.$u.toast("请上传盖章在职证明");
        return true;
      }
      break;
    case 4:
      if (formData2.email_url === "") {
        uni.$u.toast("请上传企业邮箱证明");
        return true;
      }
      break;
    case 5:
      if (formData2.qwcard_url === "") {
        uni.$u.toast("请上传企业微信名片");
        return true;
      }
      break;
  }

  return false;
};

/**
 * 手机信息认证
 *
 * @returns {boolean} 验证结果.
 */
const formVerify3 = (): boolean => {
  if (isDisabled.value) return true;

  if (formData3.mobile === "") {
    uni.$u.toast("请输入手机号");
    return true;
  }

  if (formData3.captcha === "") {
    uni.$u.toast("请输入图形验证码");
    return true;
  }

  if (formData3.password === "") {
    uni.$u.toast("请输入密码");
    return true;
  }

  if (formData3.passwords === "") {
    uni.$u.toast("请再次输入密码");
    return true;
  }

  if (formData3.password !== formData3.passwords) {
    uni.$u.toast("密码输入不一致");
    return true;
  }

  if (formData3.code === "") {
    uni.$u.toast("请输入短信验证码");
    return true;
  }

  return false;
};

/**
 * 表单提交
 */
const submit = async () => {
  isDisabled.value = true;
  uni.showLoading({ title: "加载中...", mask: true });

  const tag = uni.getStorageSync("indus_tag");

  const data = {
    ...formData1,
    ...formData2,
    ...formData3,
    tag,
  };

  const res = await uni.$u.post<UserData>("/user/companyreg", data);

  if (res.code === 1) {
    console.log(res.data);
    uni.hideLoading();
    uni.navigateTo({ url: "/pages/user/login/login?role=1" });
  } else {
    uni.$u.toast(res.msg);
  }

  isDisabled.value = false;
};
</script>

<style lang="scss" scoped>
.step-view {
  position: relative;
  height: 160rpx;
  padding-top: 18rpx;

  .line {
    width: 100%;
    height: 6rpx;
    background-color: #efefef;
  }

  .dot-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .dot {
    position: relative;
    width: 42rpx;
    height: 42rpx;
    border-radius: 50%;
    background-color: #efefef;

    &:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 21rpx;
      height: 21rpx;
      border-radius: 50%;
      background-color: $bg-color-1;
      transform: translate(-50%, -50%);
    }
  }

  .dot-el {
    text {
      color: $text-color-5 !important;
    }

    .dot {
      background-color: $bg-color-2;
    }
  }
}

.card {
  height: 110rpx;
  border-bottom: 1rpx solid $border-color-4;

  .add-view {
    width: 80rpx;
    height: 80rpx;
    background: #ececec;
    border-radius: 4rpx;
    border: 1rpx solid #cdcdcd;
  }
}

.id-img {
  width: 313rpx;
  height: 200rpx;
}

.license {
  width: 300rpx;
  height: 198rpx;
  background: #f9f9f9;
  border-radius: 6rpx;
  border: 1rpx solid #cccccc;
  overflow: hidden;
}

.synopsis {
  width: 100%;
  height: 314rpx;
  padding: 20rpx;
  border-radius: 6rpx;
  background: #f9f9f9;
  border: 1rpx solid #cccccc;
}

.photo {
  width: 160rpx;
  height: 160rpx;
  background: #f9f9f9;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  border: 1rpx solid #cccccc;
}

.card {
  height: 102rpx;
  border-bottom: 1rpx solid $border-color-4;

  .line {
    height: 36rpx;
    margin: 0 20rpx;
    border-left: 1rpx solid $border-color-4;
  }

  .captcha {
    width: 180rpx;
    height: 90rpx;
    border: 1rpx solid $border-color-4;
  }

  .send {
    width: 180rpx;
    text-align: center;
    border-left: 1rpx solid $border-color-1;
  }
}

/* 新增样式 */
.proof-upload {
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
  border: 1rpx solid #eeeeee;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  background: #ffffff;
  border-radius: 8rpx;
  border: 1rpx dashed #cccccc;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.text-400-428 {
  color: #888888;
  font-size: 24rpx;
  line-height: 36rpx;
}
</style>
